<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>小米商城</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/swiper.min.css">
	<link rel="shortcut icon" href="//s01.mifile.cn/favicon.ico" type="image/x-icon">
	<style>
		table {
			border: 1px solid black;
			width: 1200px;
			margin: 0 auto;
		}

		table tr {
			height: 50px;
		}

		td,
		th {
			border: 1px solid black;
			padding: 10px
		}

		.thu img {
			height: 40px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="top">
			<header class="container">
				<ul class="top-nav">
					<li>
						<a href="">小米商城</a>
					</li>
					<li>
						<a href="">MIUI</a>
					</li>
					<li>
						<a href="">IoT</a>
					</li>
					<li>
						<a href="">云服务</a>
					</li>
					<li>
						<a href="">金融</a>
					</li>
					<li>
						<a href="">有品</a>
					</li>
					<li>
						<a href="">小爱开放平台</a>
					</li>
					<li>
						<a href="">企业团购</a>
					</li>
					<li>
						<a href="">资质证照</a>
					</li>
					<li>
						<a href="">协议规则</a>
					</li>
					<li>
						<a href="">下载app</a>
					</li>
					<li>
						<a href="">Select Region</a>
					</li>
				</ul>
			</header>
		</div>
		<header class="head-nav container">
			<section class="head-logo">
				<a href="http://mi.com"></a>
			</section>
			<section class="nav">
				<ul class="nav-menu">
					<li>
						<a href="">小米手机</a>
					</li>
					<li>
						<a href="">Redmi 红米</a>
					</li>
					<li>
						<a href="">电视</a>
					</li>
					<li>
						<a href="">笔记本</a>
					</li>
					<li>
						<a href="">家电</a>
					</li>
					<li>
						<a href="">路由器</a>
					</li>
					<li>
						<a href="">智能硬件</a>
					</li>
					<li>
						<a href="">服务</a>
					</li>
					<li>
						<a href="">社区</a>
					</li>
				</ul>
			</section>

			<section class="head-search">
				<form action="" class="search-form">
					<input type="text" class="search-text">
					<input type="submit" class="search-btn iconfont" value="&#xe63c;">
				</form>
			</section>


		</header>
		<div class="banner">
			<div class="swiper-container container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="">
							<img src="https://i1.mifile.cn/a4/xmad_15608509772862_tevIl.jpg" alt="">
						</a>
					</div>
					<div class="swiper-slide">
						<a href="">
							<img src="https://i1.mifile.cn/a4/xmad_15608660410138_DrLFl.jpg" alt="">
						</a>
					</div>
					<div class="swiper-slide">
						<a href="">
							<img src="https://i1.mifile.cn/a4/xmad_15609507520682_FBLpS.jpg" alt="">
						</a>
					</div>
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>

				<!-- 如果需要导航按钮 -->
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>

				<!-- 如果需要滚动条 -->
				<!-- <div class="swiper-scrollbar"></div> -->
			</div>
		</div>
		<main class='page-main'>
			<div class="home-banner-box container">
				<a href="https://item.mi.com/1191700040.html?cfrom=search" target="_blank"
					data-log_code="31pchomebanner_2001012#t=normal&amp;act=other&amp;page=home&amp;bid=3186791.1&amp;adm=6214">
					<img class="" alt="驱蚊器-常态" width="1226" src="//i1.mifile.cn/a4/xmad_15571953790178_rXqtS.jpg">
				</a>
			</div>
			<div id="phone" class="brick-box container">
				<div class="box-hd">
					<h2>手机</h2>
					<div class="more">
						<a href="" class="more-link">
							查看全部<i class="iconfont">&#xe63d;</i>
						</a>
					</div>
				</div>
				<div class="box-bd">
					<promo-list :promo-list-data="phones['promo-list']">
					</promo-list>
					<brick-list :brick-list-data="phones['brick-list']">
					</brick-list>
				</div>
			</div>
			<table border="1px" c>
				<thead>
					<tr>
						<th>ID</th>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>操作</th>
						<th>合计</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in cart" :key="item.id">
						<td>{{item.product.id}}</td>
						<td class="thu">
							<img :src="item.product.thumbnail" alt="">
						</td>
						<td>{{item.product.title}}</td>
						<td>{{item.product.price}}</td>
						<td>
							<button @click="minus(item.product.id)">-</button>
							{{item.count}}
							<button @click="add(item.product.id)">+</button>
						</td>
						<td>
							<button @click="remove(index)">删除</button>
						</td>
						<td>{{item.product.price*item.count}}</td>
					</tr>
					
				</tbody>
				<tfoot>
					<tr >
						<td colspan="7">
							总价：{{totalPrice}}
						</td>
					</tr>
				</tfoot>
			</table>

			<div class="home-banner-box container">
				<a href="https://item.mi.com/1191700040.html?cfrom=search" target="_blank">
					<img class="" alt="驱蚊器-常态" width="1226" src="//i1.mifile.cn/a4/xmad_15571953790178_rXqtS.jpg">
				</a>
			</div>
			<div id="homeelec" class="brick-box container">
				<div class="box-hd">
					<h2>家电</h2>
					<ul class="tab-list">
						<li>热门</li>
						<li>电视影音</li>
						<li>电脑</li>
						<li>家居</li>
					</ul>
				</div>
				<div class="box-bd">
					<promo-list :promo-list-data="homeele['promo-list']">
					</promo-list>
					<brick-list :brick-list-data="homeele['brick-list']">
					</brick-list>
				</div>
			</div>
		</main>

		<footer>
			<div class="container">
				<p class="slogan">探索黑科技，小米为发烧而生</p>
			</div>
		</footer>
	</div>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/swiper.min.js"></script>
	<script src="./js/index.js"></script>
	<script src="./js/vue.js"></script>
	<script src="./js/mi-vue.js"></script>
</body>

</html>